﻿
$(function () {
    var request = layui.request;
    initAllChart();
    setInterval(() => {
        initAllChart();
    }, 5000);
    
    function initAllChart(){
        echarts_1_2();
        echarts_3();
        echarts_4();
        echarts_5();
        echarts_6();
    }
    function echarts_1_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('echart1'));
        var myChart2 = echarts.init(document.getElementById('echart2'));

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: []
        };

        var da1 = new Date();
        var da2 = new Date(da1.getTime() - 1000 * 60 * 60 * 24 * 6);//上周日期
        var endTime = da1.toLocaleDateString().replaceAll("/", "-") + " 23:59:59";
        var startTime = da2.toLocaleDateString().replaceAll("/", "-") + " 00:00:00";
        request.post("recycleRecord/shopAnalyseDays", { startTime: startTime, endTime: endTime }).then(res => {
            var recycleAnalysy = res.data.recycleAnalysy;
            var saleAnalysy = res.data.saleAnalysy;
            var week = getWeek();
            var data1 = new Array(week.length).fill(0);
            var data2 = new Array(week.length).fill(0);

            saleAnalysy.forEach(function (item) {
                week.forEach(function (item2, index) {
                    if (item.date == item2) {
                        data1[index] = item.dateCou;
                    }
                });
            })

            recycleAnalysy.forEach(function (item) {
                week.forEach(function (item2, index) {
                    if (item.date == item2) {
                        data2[index] = item.dateCou;
                    }
                });
            })

            option.xAxis[0].data = week;
            option.series = [{
                name: '销售',
                data: data1,
                type: 'bar',
                barWidth: '35%', //柱子宽度
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 5,
                        color: '#2f89cf',
                    }
                }
            }]

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option);

            option.series = [{
                name: '回收',
                data: data2,
                type: 'bar',
                barWidth: '35%', //柱子宽度
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 5,
                        color: '#27d08a',
                    }
                }
            }]
            myChart2.setOption(option);
            window.addEventListener("resize", function () {
                myChart1.resize();
                myChart2.resize();
            });


        })

    }

    function echarts_3() {
        var myChart = echarts.init(document.getElementById('echart3'));
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            legend: {
                top: '0%',
                data: ['销售', '回收'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }

                },


            }, {

                axisPointer: { show: false },
                axisLine: { show: false },
                position: 'bottom',
                offset: 20,



            }],

            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },

                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: []

        };

        var diff = 23
        var da1 = new Date();
        var da2 = new Date(da1.getTime() - 1000 * 60 * 60 * 24 * diff) //近24天
        var endTime = da1.toLocaleDateString().replaceAll("/", "-") + " 23:59:59";
        var startTime = da2.toLocaleDateString().replaceAll("/", "-") + " 00:00:00";
        request.post("recycleRecord/shopAnalyseDays", { startTime: startTime, endTime: endTime }).then(res => {
            var recycleAnalysy = res.data.recycleAnalysy;
            var saleAnalysy = res.data.saleAnalysy;
            var days = getLastDays(diff + 1);
            var dayNums = Array.from(Array(days.length), (v, k) => k + 1)
            var data1 = new Array(days.length).fill(0);
            var data2 = new Array(days.length).fill(0);

            saleAnalysy.forEach(function (item) {
                days.forEach(function (item2, index) {
                    if (item.date == item2) {
                        data1[index] = item.dateCou;
                    }
                });
            })

            recycleAnalysy.forEach(function (item) {
                days.forEach(function (item2, index) {
                    if (item.date == item2) {
                        data2[index] = item.dateCou;
                    }
                });
            })

            option.xAxis[0].data = dayNums;
            option.series = [{
                name: '销售',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {

                    normal: {
                        color: '#0184d5',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(1, 132, 213, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(1, 132, 213, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#0184d5',
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12
                    }
                },
                data: data1

            },
            {
                name: '回收',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {

                    normal: {
                        color: '#00d887',
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 216, 135, 0.4)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(0, 216, 135, 0.1)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#00d887',
                        borderColor: 'rgba(221, 220, 107, .1)',
                        borderWidth: 12
                    }
                },
                data: data2

            }]

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            window.addEventListener("resize", function () {
                myChart.resize();
            });


        })

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: '0%',
                data: ['销售', '回收'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            grid: {
                left: '0%',
                top: '25px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: []
        };
        request.post("recycleRecord/regionStastics", { "sort": "recycleAmount", "order": "desc", "limit": 5 }).then(res => {
            // 使用刚指定的配置项和数据显示图表。
            var keys = []
            var data1 = []
            var data2 = []
            res.data.forEach(item => {
                keys.push(item.name)
                data1.push(item.saleAmount)
                data2.push(item.recycleAmount)
            })
            option.xAxis[0].data = keys;
            option.series = [{
                name: '销售',
                data: data1,
                type: 'bar',
                barWidth: '25%', //柱子宽度
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 5,
                        color: '#2f89cf',
                    }
                }
            }, {
                name: '回收',
                data: data2,
                type: 'bar',
                barWidth: '25%', //柱子宽度
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 5,
                        color: '#27d08a',
                    }
                }
            }]
            myChart.setOption(option);
        })

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    formatter: '{value} %',
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: []
        };
        request.post("recycleRecord/regionStastics", { "sort": "percent", "order": "desc", "limit": 5 }).then(res => {
            // 使用刚指定的配置项和数据显示图表。
            var keys = []
            var data1 = []
            res.data.forEach(item => {
                keys.push(item.name)
                data1.push(item.percent)
            })
            option.xAxis[0].data = keys;
            option.series = [{
                name: '回销比',
                data: data1,
                type: 'bar',
                barWidth: '35%', //柱子宽度
                itemStyle: {
                    normal: {
                        opacity: 1,
                        barBorderRadius: 5,
                        color: '#27d08a',
                    }
                }
            }]
            myChart.setOption(option);
        })

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_6() {
        var myChart = echarts.init(document.getElementById('echart6'));
        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                //shadowBlur: 40,
                //shadowColor: 'rgba(40, 40, 40, 1)',
            }
        };
        var placeHolderStyle = {
            normal: {
                color: 'rgba(255,255,255,.05)',
                label: { show: false, },
                labelLine: { show: false }
            },
            emphasis: {
                color: 'rgba(0,0,0,0)'
            }
        };
        var option = {
            tooltip: {
                show: true,
                formatter: "{a} : {c} "
            },
            legend: {
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 12,
                bottom: '3%',

                data: ['门店总量', '登录过数量', '使用过数量', '今日活跃量'],
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
            },

            series: []
        };
        request.post("shop/couShop").then(res => {
            var couData = res.data
            for (key in couData) {
                var seriaItem = {
                    type: 'pie',
                    clockWise: false,
                    center: ['50%', '42%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,
                    data: []
                }
                if (key == 'totalCou') {
                    seriaItem.name = '门店总量'
                    seriaItem.radius = ['59%', '70%']
                    seriaItem.data = [{ value: couData[key], name: '01' }]
                } else if (key == 'loginCou') {
                    seriaItem.name = '登录过数量'
                    seriaItem.radius = ['49%', '60%']
                    seriaItem.data = [{ value: couData[key], name: '02' }, { value: couData.totalCou - couData[key], name: 'invisible', tooltip: { show: false }, itemStyle: placeHolderStyle }]
                } else if (key == 'usedCou') {
                    seriaItem.name = '使用过数量'
                    seriaItem.radius = ['39%', '50%']
                    seriaItem.data = [{ value: couData[key], name: '03' }, { value: couData.totalCou - couData[key], name: 'invisible', tooltip: { show: false }, itemStyle: placeHolderStyle }]
                } else if (key == 'activeCou') {
                    seriaItem.name = '今日活跃量'
                    seriaItem.radius = ['29%', '40%']
                    seriaItem.data = [{ value: couData[key], name: '04' }, { value: couData.totalCou - couData[key], name: 'invisible', tooltip: { show: false }, itemStyle: placeHolderStyle }]
                }
                option.series.push(seriaItem)
            }
            myChart.setOption(option);
        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    }


    function getLastDays(n) {
        var date = new Date();
        var week = [];
        for (var i = n - 1; i >= 0; i--) {
            var temp = format("yyyyMMdd", new Date(date - 1000 * 60 * 60 * 24 * i));
            week.push(temp);
        }
        return week;
    }

    function getWeek() {
        var date = new Date();
        var week = [];
        for (var i = 6; i >= 0; i--) {
            var temp = format("yyyyMMdd", new Date(date - 1000 * 60 * 60 * 24 * i));
            week.push(temp);
        }
        return week;
    }

    /**
     *日期格式化函数
     *yyyy/MM/dd hh:mm:ss SSS 2017/05/16 09:24:20 850
     "yyyy/M/d h:m:ss SSS 2017/5/16 9:24:35 723
     *
     */
    function format(format, date) {
        var map = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        }
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(- RegExp.$1.length));
        }
        for (var k in map) {
            if (new RegExp('(' + k + ')').test(format)) {
                var strValue = map[k] + '';
                var len = RegExp.$1.length < strValue.length ? strValue.length : RegExp.$1.length;
                if (strValue.length == 1) {
                    strValue = '0' + strValue;
                }
                format = format.replace(RegExp.$1, strValue.substr(- len));
            }
        }
        if (/(S+)/.test(format)) {
            format = format.replace(RegExp.$1, (date.getMilliseconds() + '').substr(0, RegExp.$1.length));
        }
        return format;
    }
})




















